<template>
   <tiny-row :flex="true" :gutter="10">
    <tiny-col :span="6" :no="3">
      <vo-table :data="data.tableData">
      <template #leftBar>
        <vo-select select default dictCode="cacheModel" v-model:value="data.cacheModel" placeholder="选择类型" />
        <tiny-button ghost type="info" @click="search"><vo-icon iconName="search"></vo-icon>搜索</tiny-button>
      </template>
      <template v-slot:handleSlot="{row}">
        <tiny-button type="text" @click="showRedisKey(row)"> <vo-icon iconName="view-detail"></vo-icon>查看 </tiny-button>
      </template>
    </vo-table>
    </tiny-col>
    <tiny-col :span="6" :no="3">
      <yu-ace-editor :data="data.dictJson" lang="json" v-model:value="data.dictJson"  :options="data.options" height="80vh"></yu-ace-editor>
    </tiny-col>
  </tiny-row>
   

  <vo-dialog :data="data.TableDataShow.dialogConfig" title="缓存查看" v-model:isShow="data.isShow">
    <detail :editData="data.editData" v-model:isShow="data.isShow" />
  </vo-dialog>
</template>

<script setup>
  import {ref, reactive, onMounted, getCurrentInstance} from 'vue';
  import detail from './RedisDataDetail.vue';

  let {proxy} = getCurrentInstance();
  const data = reactive({
    cacheModel: '', //搜索信息
    isShow: false, //
    tableData: {data: [], cols: [], tableArrts: {haspage: true}},
    tableDataEdit: {isShow: false, dialogConfig: {title: ''}},
    TableDataShow: {data: {}, isShow: false, dialogConfig: {title: '', width: '60%'}},
    editData: {},
    options:{showLineNumbers:false,showGutter:false},
    dictJson:"[]"
  });
  data.tableData.cols = [
    {type: 'index'},
    {title: '模块', key: 'model', width: 120, tooltip: true},
    {title: '模块代码', key: 'modelCode', align: 'center'},
    {title: '字典类型', key: 'keyType', tooltip: true},
    {title: '操作', slot: 'handleSlot', width: 180},
  ];
  onMounted(() => {
    search();
  });
  const showRedisKey = row => {
    console.log(row);
    data.isShow = true;
    data.editData = row;
    data.TableDataShow.title = row.model;
  };
  const search = () => {
    proxy.$api.system.queryRedisKeys({}).then(res => {
      data.tableData.data = res;
    });
    data.tableData;
  };
</script>
<style lang="scss" scoped>
  :deep(.el-input__wrapper) {
    height: 21px;
  }
</style>
